import aboutUsIcon from '@/assets/images/aboutUs.png';
import helpCenterIcon from '@/assets/images/helpCenter.png';
import contactIcon from '@/assets/images/icon_contact.png';
import experienceIcon from '@/assets/images/icon_experience.png';
import warnIcon from '@/assets/images/icon_warn.png';
import shareIcon from '@/assets/images/share.png';
import messageIcon from '@/assets/images/message.png';
import Avatar from '@/components/Avatar';
import { GButton } from '@/components/GButton';
import { ListItemWhenLoggedIn } from '@/components/ListItem';
import NavigateItem from '@/components/ListItem/NavigateItem';
import {
  getWxCustomerServiceConfig,
  supportExperienceCenter,
  supportNotice,
  supportWechatPay,
} from '@/config/template';
import { useMessagesStore, useUseStateStore, useWalletStore } from '@/hooks';
import UserStateModel from '@/models/userState';
import walletModel from '@/models/wallet';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import { checkIsLogin, getLoginInfo, getToken, goToLoginPage } from '@/utils/loginStatus';
import { Image, Text, View } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import i18n from 'i18n-js';
import { observer } from 'mobx-react';
import React, { useCallback, useRef } from 'react';
import gizCoinIcon from '@/assets/images/my_recharg_icon_gizwits_beans.png';
import walletIcon from '@/assets/images/wallet.png';
import PageContainer from '@/components/PageContainer';
import ProductConfig from '@/config/product';
import BindPhoneTip from './BindPhoneTip';

const dstyle = GStyleSheet.create({
  userInfo: {
    justifyContent: 'flex-start',
  },
  avatar: {
    width: 50,
    height: 50,
  },
  redPoint: {
    width: 8,
    height: 8,
    borderRadius: 8,
    backgroundColor: '#e80037',
    marginLeft: 10,
  },
  name: {
    color: DynamicColors.titleTextColor,
    marginLeft: 20,
  },
  icon: {
    width: 20,
    height: 20,
  },
  item: {
    marginTop: 10,
  },
  walletItem: {
    justifyContent: 'flex-end',
  },
  balance: {
    color: DynamicColors.titleTextColor,
    marginLeft: 8,
  },
  bindPhoneView: {
    backgroundColor: '#edf4fe',
    borderRadius: 99,
    padding: 10,
  },
  bindPhoneText: {
    color: '#3478f5',
  },
});

const customerServiceConfig = getWxCustomerServiceConfig();

const alarmPushConfig = supportNotice();

const Mine: React.FC = () => {
  const isLogin = checkIsLogin(false);
  const { userInfo } = useUseStateStore();
  const { balance } = useWalletStore();
  const messages = useMessagesStore();

  // console.log("Mine render", userInfo);
  const queryData = useCallback(() => {
    UserStateModel.getUserInfo();
    messages.getMessagesByNone();
    walletModel.getBalance();
  }, []);

  useDidShow(() => {
    console.log('Mine componentDidShow');
    if (isLogin) {
      queryData();
    }
  });

  const showCustomerService = useRef(customerServiceConfig && customerServiceConfig.enable);

  const callService = useCallback(async () => {
    const info = await getLoginInfo();
    Taro.openEmbeddedMiniProgram({
      appId: 'wx37043daa20905688',
      path: 'pages/index/index?uid=' + info.uid + '&token=' + info.token,
      envVersion: 'release',
      extraData: {
        uid: info.uid,
        token: info.token,
      },
      success: (res) => {
        console.log('跳转成功', res);
      },
      fail: (err) => {
        console.log('跳转失败', err);
      }
    });
  }, []);

  const styles = dstyle.useDynamicStyle();
  const name = isLogin ? UserStateModel?.getNickName() : i18n.t('NO_LOGIN');
  const support = supportExperienceCenter();
  const supportWallet = supportWechatPay();
  const havePhone = !!userInfo.mobile;

  return (
    <PageContainer title={i18n.t('MIME')} back={false} isTab>
      <View style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <View style={{ flex: 1 }}>
          <NavigateItem
            style={{ marginTop: 1 }}
            arrow
            url='/pages/account/index'
            extraStyle={{ flex: undefined, paddingLeft: 0 }}
            contentStyle={{ flex: 1 }}
          >
            <View className='centerFlex' style={{ justifyContent: 'space-between', flex: 1 }}>
              <View className='centerFlex' style={styles.userInfo}>
                <Avatar src={isLogin ? userInfo.avatar : undefined} style={styles.avatar} avatarBackgroundColor={!isLogin ? '#999' : undefined} />
                <View style={{ width: 150 }}><Text style={styles.name} className='ellipsisText'>{name}</Text></View>
              </View>
              {!havePhone && isLogin && <BindPhoneTip />}
            </View>
          </NavigateItem>
          {supportWallet && (
            <NavigateItem
              icon={<Image style={styles.icon} src={walletIcon} />}
              style={styles.item}
              arrow
              url='/pages/wallet/index'
              extra={
                <View style={styles.walletItem} className='centerFlex'>
                  <Image style={styles.icon} src={gizCoinIcon} />
                  <Text style={styles.balance}>{balance}</Text>
                </View>
              }>
              {i18n.t('WALLET')}
            </NavigateItem>
          )}
          {/* {support && (
            <NavigateItem
              icon={<Image style={styles.icon} src={experienceIcon} />}
              style={styles.item}
              arrow
              needLoggedIn={false}
              url='/pages/experienceCenter/index'
            >
              {i18n.t('EXPERIENCE_CENTER')}
            </NavigateItem>
          )} */}
          {/* <NavigateItem
            icon={<Image style={styles.icon} src={messageIcon} />}
            style={styles.item}
            arrow
            url='/pages/notiCenter/index'
          >
            {i18n.t('NOTI_CENTER')}
            {messages.haveUnreadMessage === true ? <View style={styles.redPoint}></View> : null}
          </NavigateItem> */}
          {/* {showCustomerService.current && (
            <ListItemWhenLoggedIn
              style={styles.item}
              icon={<Image style={styles.icon} src={contactIcon} />}
              arrow
              onPress={callService}
            >
              {i18n.t('智能客服')}
            </ListItemWhenLoggedIn>
          )} */}
          {/* {alarmPushConfig && (
            <NavigateItem
              style={styles.item}
              arrow
              icon={<Image style={styles.icon} src={warnIcon} />}
              // extra={<Switch />}
              url='/pages/alarmPush/index'
            >
              {i18n.t('ALARM_PUSH')}
            </NavigateItem>
          )} */}
          {/* {ProductConfig.hasProductSupportDeviceShare() && (
            <NavigateItem
              icon={<Image style={styles.icon} src={shareIcon} />}
              style={styles.item}
              arrow
              url='/pages/share/shareList/index'
            >
              {i18n.t('DEVICE_SHARE')}
            </NavigateItem>
          )} */}
          <NavigateItem
            icon={<Image style={styles.icon} src={helpCenterIcon} />}
            style={styles.item}
            arrow
            url='/pages/helpCenter/index'
          >
            {i18n.t('HELP_CENTER')}
          </NavigateItem>
          <NavigateItem
            icon={<Image style={styles.icon} src={shareIcon} />}
            style={styles.item}
            arrow
            url='/pages/thirdPlatform/index'
          >
            添加扣子智能体
          </NavigateItem>
          <NavigateItem
            icon={<Image style={styles.icon} src={'https://xbgroup-static.gizwits.com/cybertron/users/391941/media/%E9%92%B1%E5%8C%85_(1)_1741169976595.png'} />}
            style={styles.item}
            arrow
            url='/pages/payment/index'
          >
            充值管理
          </NavigateItem>
          <NavigateItem
            style={styles.item}
            arrow
            icon={<Image style={styles.icon} src={aboutUsIcon} />}
            url='/pages/about/index'
            needLoggedIn={false}
          >
            {i18n.t('ABOUT_US')}
          </NavigateItem>
        </View>
        <View style={{ marginBottom: 30, height: 80 }}>
          {!isLogin && <GButton text={i18n.t('WECHAT_LOGIN')} onPress={goToLoginPage} />}
        </View>
      </View>
    </PageContainer>
  );
};

export default observer(Mine);
